<template>
  <view>
    <view class="tabBar">
      <view class="bg" :style="'background-image: url(' + imageURL + 'tabBar/bg.png);'">
        <view class="content flex align-end">
          <!-- 首页 -->
          <view class="tabBar-item">
            <navigator
              class="item-content flex column just-center align-center"
              open-type="switchTab"
              url="/pages/tabBar/home/home"
              hover-class="none"
            >
              <view class="box flex just-center">
                <image v-if="current == 0" :src="imageURL + 'tabBar/home_select.png'"></image>
                <image v-else :src="imageURL + 'tabBar/home_normal.png'"></image>
              </view>
              <view class="f-22" :class="current == 0 ? 'select' : 'normal'">首页</view>
            </navigator>
          </view>
          <!-- 商城 -->
          <view class="tabBar-item">
            <navigator
              class="item-content flex column just-center align-center"
              open-type="switchTab"
              url="/pages/tabBar/shopping/shopping"
              hover-class="none"
            >
              <view class="box flex just-center">
                <image v-if="current == 1" :src="imageURL + 'tabBar/shopping_select.png'"></image>
                <image v-else :src="imageURL + 'tabBar/shopping_normal.png'"></image>
              </view>
              <view class="f-22" :class="current == 1 ? 'select' : 'normal'">商城</view>
            </navigator>
          </view>
          <!-- 发布 -->
          <view class="tabBar-item" @click="show = true">
            <view class="item-content flex column just-center align-center">
              <view class="box flex just-center">
                <image class="img" :src="imageURL + 'tabBar/publish.png'"></image>
              </view>
              <view class="f-22 normal">发布</view>
            </view>
          </view>
          <!-- 游玩 -->
          <view class="tabBar-item">
            <navigator
              class="item-content flex column just-center align-center"
              open-type="switchTab"
              url="/pages/tabBar/play/play"
              hover-class="none"
            >
              <view class="box flex just-center">
                <image v-if="current == 2" :src="imageURL + 'tabBar/play_select.png'"></image>
                <image v-else :src="imageURL + 'tabBar/play_normal.png'"></image>
              </view>
              <view class="f-22" :class="current == 2 ? 'select' : 'normal'">游玩</view>
            </navigator>
          </view>
          <!-- 我的 -->
          <view class="tabBar-item">
            <navigator
              class="item-content flex column just-center align-center"
              open-type="switchTab"
              url="/pages/tabBar/mine/mine"
              hover-class="none"
            >
              <view class="box flex just-center">
                <image v-if="current == 3" :src="imageURL + 'tabBar/mine_select.png'"></image>
                <image v-else :src="imageURL + 'tabBar/mine_normal.png'"></image>
              </view>
              <view class="f-22" :class="current == 3 ? 'select' : 'normal'">我的</view>
            </navigator>
          </view>
        </view>
      </view>

      <view class="bottom-safe"></view>
    </view>
    <u-popup v-model="show" mode="bottom" height="450rpx" border-radius="18">
      <view
        class=""
        style="
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        "
      >
        <view
          class="up-content"
          style="
            width: 700rpx;
            margin: 0 auto;
            margin-top: 50rpx;
            background-color: #f6f6f6;
            padding: 20rpx;
            border-radius: 16rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
          @click="tiao1"
        >
          <view class="up-name" style="display: flex; align-items: center">
            <image
              class="up-img"
              style="width: 50rpx; height: 50rpx"
              :src="imageURL + 'shopping/fabu1.png'"
              mode=""
            ></image>
            <text style="margin: 0 20rpx">发布攻略</text>
          </view>
          <image
            style="width: 14rpx; height: 20rpx; display: inline-block"
            :src="imageURL + 'shopping/com.png'"
            mode=""
          ></image>
        </view>
        <view
          class="up-content"
          style="
            width: 700rpx;
            margin: 0 auto;
            margin-top: 50rpx;
            background-color: #f6f6f6;
            padding: 20rpx;
            border-radius: 16rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
          @click="tiao2"
        >
          <view class="up-name" style="display: flex; align-items: center">
            <image
              class="up-img"
              style="width: 50rpx; height: 50rpx"
              :src="imageURL + 'shopping/fabu2.png'"
              mode=""
            ></image>
            <text style="margin: 0 20rpx">发布商品信息</text>
          </view>
          <image
            style="width: 14rpx; height: 20rpx; display: inline-block"
            :src="imageURL + 'shopping/com.png'"
            mode=""
          ></image>
        </view>
        <view
          class=""
          style="text-align: center; height: 100rpx; margin-top: 50rpx; line-height: 100rpx"
          @click="show = false"
        >
          取消
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { imageURL } from "@/utils/config.js";
import { BaseUrl } from "../../utils/req";

export default {
  props: {
    current: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      imageURL,
      show: false,
    };
  },
  methods: {
    /**
     * 发布
     */
    onPublish() {},
    tiao1() {
      uni.navigateTo({
        url: "/upRelease/fabu/fabu",
      });
      this.show = false;
    },
    tiao2() {
      this.$request.post("api/wanlshop.shop/apply_check").then((res) => {
        if (!res.data) {
          uni.navigateTo({ url: "/upRelease/shangjia/shangjia" });
        } else if (res.data.verify == 3) {
          setTimeout(() => {
            uni.navigateTo({
              url: "/wNew/pages/addProducts",
            });
          }, 1000);
        } else if (res.data.verify < 3) {
          uni.showToast({
            title: "商家审核中",
            icon: "none",
          });
        } else if (res.data.verify == 4) {
          uni.showToast({
            title: "审核未通过",
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({ url: "/upRelease/shangjia/shangjia" });
          }, 800);
        }
      });
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.tabBar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;

  .bg {
    width: 100%;
    height: 154rpx;
    padding-top: 50rpx;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    .content {
      width: 100%;
      height: 100%;

      .tabBar-item {
        flex: 1;
        height: 100%;

        .item-content {
          width: 100%;
          height: 100%;
        }

        .box {
          padding-bottom: 6rpx;

          > image {
            width: 48rpx;
            height: 48rpx;
            display: block;
          }

          .img {
            width: 82rpx;
            height: 82rpx;
            margin-top: -34rpx;
          }
        }

        .normal {
          color: $tabBar-normal-color;
        }

        .select {
          color: $tabBar-select-color;
        }
      }
    }
  }

  .bottom-safe {
    width: 100%;
    height: env(safe-area-inset-bottom);
    background-color: white;
    overflow: hidden;
  }
}
</style>
